{% extends "main/base.html" %}
{% load static i18n %}
{% block title %}{% trans '编辑公告' %}{% endblock %}
{% block this_css %}
<link rel="stylesheet" type="text/css" href="{% static 'flatlab/assets/summernote/dist/summernote.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'flatlab/css/bootstrap-select.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'flatlab/assets/jquery-multi-select/css/multi-select.css' %}">
{% endblock %}
{% block content %}
<div class="col-lg-offset-2 col-lg-8">
    <section class="panel">
        <header class="panel-heading">
            {% trans "添加公告" %}
            {% if form.errors %}
            <p>{% trans "提交的数据有误,请认真检查!" %}</p>
            {% endif %}
        </header>
        <div class="panel-body">
            <form method="post" enctype="multipart/form-data" class="form-horizontal">{% csrf_token %}
                {{ form.non_field_errors }}
                {% if request.user.is_authenticated %}
                <input type="hidden" name="created_by" id="id_created_by" value="{{ request.user.id }}">
                {% endif %}
                <div class="form-group">
                    <div class="col-sm-2 control-label">{{ form.title.label_tag }}</div>
                    <div class="col-sm-6">{{ form.title }}{{ form.title.errors }}</div>
                    <div class="col-sm-2 control-label">{{ form.is_show.label_tag }}</div>
                    <div class="col-sm-2">
                        <div class="switch switch-square"
                            data-on-label="<i class=' fa fa-check'></i>"
                            data-off-label="<i class='fa fa-times'></i>">
                            {{ form.is_show }}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">{{ form.remarks.label_tag }}</div>
                    <div class="col-sm-10">{{ form.remarks }}{{ form.remarks.errors }}</div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">{{ form.announce_tag.label_tag }}</div>
                    <div class="col-sm-10">{{ form.announce_tag }}{{ form.announce_tag.errors }}</div>
                </div>
                <div class="form-group" align="right">
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-primary">{% trans "提交" %}</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
{% endblock %}
{% block this_js %}
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-switch.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-select.min.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.multi-select.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.quicksearch.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/summernote/dist/summernote.min.js' %}"></script>
<script>
jQuery(document).ready(function(){
    $('.summernote').summernote({
        height: 200,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true                 // set focus to editable area after initializing summernote
    });
});
</script>
<script>
    $('#id_announce_tag').multiSelect({
        selectableHeader: "<div>可用的标签</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        selectionHeader: "<div>选中的标签</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });
</script>
{% endblock %}